<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>


        <!-- //  第二步使用自定义指令  在元素身上  v-自定义指令的名字   -->
        <input type="text" v-my_foucs id='1'>

        <h1> 使用带有参数的自定义指令</h1>
        <input type="text" v-my_msg="'你好'">
        <input type="text" v-my_msg="aaa">
    </div>

    <hr>
    <!-- <div id='app2'>


     
        <input type="text"  v-my_foucs  id='2'>
    </div> -->
    <script>

        // Vue.directive('自定义指令的名字',{

        //   bind: function () {},
        //   inserted: function (el) {
        //       console.log(el); //获取dom元素
        //   },
        //   update: function () {},



        // })

        // 全局自定义指令
        //第一步定义自定义指令
        Vue.directive('my_foucs', {


            inserted: function (el) {
                //   alert('自定义指令')
                console.log(el); //获取dom元素
                el.style.color = 'red'
                //   el.style.backgroundColor='green'
                el.style.width = '300px'
                el.style.height = '100px'
                el.focus()

            },

        })

        // 定义带有参数的自定义指令
        Vue.directive('my_msg', {
            inserted: function (el, binding) {
                //   alert('自定义指令')
                console.log(el); //获取dom元素
                console.log(binding);
                el.value = binding.value

            },
            update: function (el, newVal) {
                console.log(newVal);
                el.value = newVal.value
            }

        })








        let vm = new Vue({
            el: '#app',
            data: {
                aaa: "hello"
            },
        })
        // new Vue({
        //     el: '#app2',
        //     data: {},
        // })


        setInterval(() => {
            vm.aaa = Math.random()
            console.log(vm.aaa);
        }, 1000);
    </script>
</body>

</html>